<template>
	<div>
		<div class="top_a">
			<!-- 头像 -->
			<p class="toux">
				<img src="../img/tx.png" alt="">
			</p>
			<!-- 姓名 -->
			<h4>颜</h4>
			<img src="../img/mann.png" alt="" class="mann">
			<!-- 数量 -->
			<ul class="shulang">
				<li class="san">30</li>
				<li class="san_1">3000</li>
				<li class="san_1">10.8万</li>
			</ul>
			<ul class="guanz">
				<li class="gz">关注</li>
				<li class="fs">粉丝</li>
				<li class='hz'>获赞</li>
			</ul>
			
			<!-- 编辑资料 -->
			<ul class="qqbb">
				<li class="bianj"  @click="bjzl">
					编辑资料
				</li>
				<li class="bianj_1">
					<img src="../img/xb.png" alt="" class="xb">
				</li>
			</ul>
			<!-- xinx -->
			<ul class="xinx">
				<li class="nan">
					<img src="../img/nanaaa.png" alt="" class="zjbjjj">
				</li>
				<li>
					完善您的位置信息
					
				</li>
				<li>
					解锁等级
					
				</li>
				<li>
					成为会员
					
				</li>
			</ul>
			<!-- 分享 -->
			<div class="fenxiang" >
				分享瞬间
				</div>
		</div>
		<!-- 选项卡 -->
		
		<div class="abbb">
			<mt-navbar v-model="selected">
				<div @click="sc" class="xxk">
					<mt-tab-item id="1" >收藏</mt-tab-item>
				</div>
			  <div @click="dt" class="xxk1">
			  	<mt-tab-item id="2" >动态</mt-tab-item>
			  </div>
			  <div @click="zg" class="xxk1">
			  	<mt-tab-item id="3" >赞过</mt-tab-item>
			  </div>
			</mt-navbar>
		</div>
		
		
	
		
		
		
		
		
		
		<router-view></router-view>
		<navbar></navbar>
	</div>
</template>

<script>
	import navbar from '../navbar.vue'
	export default{
		components: {
		 navbar,
		},
		methods:{
			bjzl(){
				this.$router.push('/bjxx')
			},
			sc(){
				this.$router.push('/sc')
			},
			dt(){
				this.$router.push('/dt')
			},
			zg(){
				this.$router.push('/zg')
			}
			
		},
		data() {
			return{
				selected:'',
				
				
			}
		}
	}
</script>

<style lang="less" scoped>
	div{
		.top_a{
			position: relative;
			width: 100%;
			height: 237px;
			background-color: rgba(111, 129, 237, 100);
			p{
				position: absolute;
				top: 25.3%;
				left: 8%;
			}
			h4{
				padding-top: 20px;
				color: rgba(255, 255, 255, 100);
				font-size: 18px;
			}
			.mann{
				position: absolute;
				top: 4.26%;
				right: 4.53%;
			}
			.shulang{
				display: flex;
				text-align:center;
				width: 80%;
				.san{
					margin-top: 25px;
					margin-left: 43.3%;
					color: rgba(255, 255, 255, 100);
					font-size: 12px;
				}
				.san_1{
					margin-top: 25px;
					margin-left: 13.3%;
					color: rgba(255, 255, 255, 100);
					font-size: 12px;
				}
			}
			.guanz{
				display: flex;
				text-align:center;
				width: 80%;
				.gz{
					// margin-top: 25px;
					margin-left: 41%;
					color: rgba(255, 255, 255, 100);
					font-size: 12px;
				}
				.fs{
					// margin-top: 25px;
					margin-left: 13.3%;
					color: rgba(255, 255, 255, 100);
					font-size: 12px;
				}
				.hz{
					margin-left: 13.3%;
					color: rgba(255, 255, 255, 100);
					font-size: 12px;
				}
			}
			.qqbb{
				display: flex;
				.bianj{
					margin-left: 30.3%;
					width:38.4% ;
					height: 30px;
					border-radius: 23px;
					// text-align: center;
					line-height: 30px;
					margin-top: 10px;
					background: #fff;
					border: 1px solid rgba(187, 187, 187, 100);
					color: rgba(16, 16, 16, 100);
					font-size: 12px;
				}
				.bianj_1{
					width: 11.7%;
					height: 30px;
					margin-top: 10px;
					margin-left: 30px;
					border-radius: 14px;
					background: #fff;
					border: 1px solid rgba(187, 187, 187, 100);
					.xb{
						margin-top: 5px;
					}
				}
			}
			.xinx{
				display: flex;
				.nan{
					background: rgb(98, 140, 254);
					margin-top: 10px;
					margin-left: 50px;
					width: 20px;
					height: 20px;
					border: 1px solid rgb(98, 140, 254) ;
					border-radius:50%
					
				
					
					
				}
				li{
					text-align: center;
					font-size: 12px;
					padding: 0 5px ;
					box-sizing: border-box;
					margin-top: 10px;
					margin-left: 10px;
					border-left:2px solid #F7F7F7 ;
					text-align: center;
					
				}
			}
			.fenxiang{
				margin-left: 15.3%;
				width:72.4% ;
				height: 30px;
				border-radius: 23px;
				// text-align: center;
				line-height: 30px;
				margin-top: 10px;
				background: #fff;
				border: 1px solid rgba(187, 187, 187, 100);
				color: rgba(16, 16, 16, 100);
				font-size: 12px;
			}
			
		}
		.abbb{
			width: 100%;
		}
		.zjbjjj{
				margin-left: -5px;
		}
		.xxk{
			margin-left:26.6% ;
		}
		.xxk1{
			margin-left:13.3% ;
		}
		
	}
</style>

